<template>
  <div class="bets-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="下注时间">
          <el-date-picker clearable v-model="time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column align="center" prop="lottery_name" label="彩票类型" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="赛程(主队VS客队)" show-overflow-tooltip width="260">
          <template slot-scope="scope">{{`${scope.row.num_str} ${scope.row.home_team_name} VS ${scope.row.guest_team_name}`}}</template>
        </el-table-column>
        <el-table-column align="center" prop="play_name" label="下注类型" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="bet_total_price" label="下注金额" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="theory_bonus_price" label="理论奖金" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="total_bonus_price" label="实际奖金" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="赛果(主队VS客队)" show-overflow-tooltip>
          <template slot-scope="scope">{{`${scope.row.home_team_score} : ${scope.row.guest_team_score}`}}</template>
        </el-table-column>
        <el-table-column align="center" prop="person_num" label="下注人数" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="bonus_time" label="开奖时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="state_name" label="状态" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'BetsManage',
  data () {
    return {
      loading: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      time: ['', ''],
      tableData: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions({
      getInitData: 'orderManage/getOrderCount'
    }),
    init () {
      const [a, b] = this.time
      const params = {
        create_time_start: a && this.$moment(a).format('YYYY-MM-DD'),
        create_time_end: b && this.$moment(b).format('YYYY-MM-DD'),
        size: this.pageSize,
        page: this.currentPage
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { list, total } = res
        this.tableData = list
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.time = ['', '']
    }
  }
}
</script>
<style lang="less">
  .bets-manage {
    .sai-guo {
      .sai-guo-div {
        border-bottom: 1px solid #ebeef5;
      }
      .sai-guo-div:last-child {
        border-bottom: none;
      }
    }
    .xiazhu-saicheng {
      text-align: left;
      .xiazhu-saicheng-span-2 {
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 5px;
        margin: 0 5px;
      }
    }
  }
</style>
